<template>
    <div>
        <div class="top-div">
            <el-row>
                <el-col :span="2" :push="22">
                    <el-button v-if="$store.state.authList.indexOf('index:section:save')!=-1" type="primary" @click="dialogVisible=true" icon="el-icon-plus">添 加</el-button>
                </el-col>
            </el-row>
        </div>
        <div style="height: calc(100vh - 205px); background-color:#fff;">
            <el-scrollbar style="height: calc(100vh - 204px);">
                <el-tree style="position: relative" :data="dataSection" default-expand-all node-key="id" ref="tree"
                         highlight-current>
                     <span slot-scope="{ node, data }">
                         <span>{{ node.label }}</span>
                         <span class="custom-tree-node">
                             <el-button v-if="$store.state.authList.indexOf('index:section:del')!=-1"  style="color: #ff0000;" type="text" size="mini"
                                        @click="() => del(data)">删除</el-button>
                             <el-button v-if="$store.state.authList.indexOf('index:section:update')!=-1"  type="text" size="mini"
                                        @click="() => edite(data)">编辑</el-button>
                        </span>
                     </span>
                </el-tree>
            </el-scrollbar>
        </div>
        <el-dialog
                title="类别管理"
                :visible.sync="dialogVisible"
                width="37%"
                :show-close="false">
            <el-form ref="form" :model="formData" :rules="rules" :inline="true">
                <el-form-item label="类别名称:"  prop="name">
                        <el-input v-model="formData.name"  placeholder="请输入类别名称"></el-input>
                </el-form-item>
                <el-form-item label="所属类别:" prop="parentId">
                    <el-select v-model="formData.parentId" placeholder="请选择类别">
                        <el-option label="顶级分类" value="0"></el-option>
                        <el-option  v-for="item in dataSection" :label="item.label" :key="item.id"
                                   :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="主页显示:" v-if="formData.parentId!='0'">
                    <el-switch
                            v-model="formData.flag"
                            active-color="#13ce66"
                            inactive-color="#ff4949">
                    </el-switch>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="clearFormData">取 消</el-button>
                <el-button type="primary" @click="saveSection">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import sectionApi from "../../api/sectionApi";
    import util from "../../util/util";

    export default {
        name: "SectionTable",
        data() {
            return {
                dialogVisible: false,
                dataSection: [],
                formData: {
                    id: "",
                    name: "",
                    parentId: "",
                    flag:false
                },
                rules:{
                    name: [{
                        required: true,
                        message: '请输入名称',
                        trigger: 'blur'
                    }],
                    parentId: [{
                        required: true,
                        message: '请至少选择一个类别',
                        trigger: 'change'
                    }],
                }
            }
        },
        methods: {
            async del(data) {
                if(await util.deleteConfirm()){
                    sectionApi.delete(data.id).then(res => {
                        this.listSection()
                    })
                }
            },
            edite(data) {
                this.formData.id = data.id
                this.formData.name = data.label
                this.formData.parentId = data.parentId
                this.formData.flag=data.flag
                this.dialogVisible = true
            },
            saveSection() {
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        if (this.formData.id == null || this.formData.id == '') {
                            sectionApi.save(this.formData)
                                .then(res => {
                                    this.clearFormData()
                                    this.listSection()
                                })
                        } else {
                            sectionApi.update(this.formData)
                                .then(res => {
                                    this.clearFormData()
                                    this.listSection()
                                })
                        }
                    }
                })
            },
            listSection() {
                sectionApi.list().then(res => {
                    this.dataSection= res.data[0].children
                })
            },
            clearFormData() {
                this.formData = {
                    id: "",
                    name: "",
                    parent: "",
                    flag: false
                }
                this.dialogVisible = false
            }
        },
        mounted() {
            this.listSection()
        }
    }
</script>

<style scoped>

    .el-select-dropdown__item {
        margin-bottom: 12px;
    }

    .custom-tree-node {
        position: absolute;
        right: 12px;
    }
</style>